<template>
	<div class="table-demo-container layout-padding">
		<div class="table-demo-padding layout-padding-view layout-padding-auto">
			<TableSearch :search="state.tableData.search" @search="onSearch" @download="onDownload" />
			<div style="height:100%;overflow-y: auto;">
				<el-table v-loading="state.tableData.config.loading" stripe :data="state.tableData.data"
					style="width: 100%;height:100%;">
					<el-table-column prop="employeeCode" label="工号" fixed show-overflow-tooltip width="120" align="center"
						header-align="center" />
					<el-table-column prop="employeeName" label="姓名" fixed show-overflow-tooltip width="120" align="center"
						header-align="center" />
					<el-table-column v-for="(item) in state.days" :label="item" header-align="center">
						<el-table-column :prop="`days.${item}.signIn`" label="签到时间" width="100" show-overflow-tooltip
							align="center" header-align="center" />
						<el-table-column :prop="`days.${item}.signOut`" label="签退时间" width="100" show-overflow-tooltip
							align="center" header-align="center" />
						<el-table-column :prop="`days.${item}.status`" label="考勤状态" width="100" header-align="center"
							align="center">
							<template #default="{ row }">
								<!-- {{ row.days[item].status == 2
										? '正常' : '异常' }} -->
								<el-text size="small"
									:type="row.days[item]?.status === 2 ? 'success' : 'danger'">{{ row.days[item]?.status == 2
										? '正常' : '异常' }}</el-text>
							</template>
						</el-table-column>
					</el-table-column>
					<el-table-column label="总计" props="count" fixed="right" header-align="center">
						<el-table-column prop="count.lossCardTotal" label="缺卡(次数)" width="100" align="center" />
						<el-table-column prop="count.lossSignInTotal" label="迟到(次数)" width="100" align="center" />
						<el-table-column prop="count.lossSignOutTotal" label="早退(次数)" width="100" align="center" />
						<el-table-column prop="count.lossSignWorkTotal" label="旷工(次数)" width="100" align="center" />
						<el-table-column prop="count.statusTotal" label="异常(次数)" width="100" align="center" />
					</el-table-column>
				</el-table>
			</div>
			<div style="margin-top: 20px;">
				<el-pagination v-model:current-page="state.tableData.param.pageNum"
					v-model:page-size="state.tableData.param.pageSize" :pager-count="5" :page-sizes="[10, 20, 30]"
					:total="state.tableData.config.total" layout="total, sizes, prev, pager, next, jumper" background
					@size-change="onHandleSizeChange" @current-change="onHandleCurrentChange">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, reactive, onMounted } from 'vue';
import moment from 'moment';
import { useAttendDailyCountEmployeeApi, } from '/@/api/attend/daily';
import { ElMessage, ElMessageBox } from 'element-plus';
import { downloadFile } from '/@/utils/downloadFile';
// 引入组件
const TableSearch = defineAsyncComponent(() => import('/@/components/table/exportSearch.vue'));

// 定义变量内容
const state = reactive({
	days: [] as any,
	tableData: {
		data: [] as any,
		config: {
			total: 0, // 列表总数
			loading: false,
			baseUrl: import.meta.env.VITE_API_URL
		},
		param: {
			employeeCode: '',
			employeeName: '',
			date: moment().add(1000 * 3600 * 24 * -31).format('YYYY-MM-DD'),
			day: 31,
			pageNum: 1,
			pageSize: 10,
		},
		search: [
			{ label: '起始日期', prop: 'date', placeholder: '请选择开始日期', required: true, type: 'stamp', defaultValue: moment().add(1000 * 3600 * 24 * -31).format('YYYY-MM-DD') },
			{ label: '结束日期', prop: 'tdate', placeholder: '请选择结束日期', required: true, type: 'stamp', defaultValue: moment().add(1000 * 3600 * 24 * -1).format('YYYY-MM-DD') },
			// { label: '时间跨度', prop: 'day', placeholder: '请选择时间跨度', required: true, type: 'number', defaultValue: 31 },
			{ label: '工号', prop: 'employeeCode', placeholder: '请输入工号', required: false, type: 'input', defaultValue: '' },
			{ label: '姓名', prop: 'employeeName', placeholder: '请输入姓名', required: false, type: 'input', defaultValue: '' },
		],
	},
});

const setDays = (start: string) => {
	console.log(start, 'start')
	let dayss = [] as any
	for (let i = 0; i < 31; i++) {
		dayss.push(moment(start).add(1000 * 3600 * 24 * i).format('YYYY-MM-DD'))
	}
	return dayss
}

const getDays = (startDay: any, endDay: any) => {
	const startDate = moment(startDay).format('YYYY-MM-DD');
	const endDate = moment(endDay).format('YYYY-MM-DD');
	return moment(endDate).diff(startDate, 'day') + 1
}


// 初始化列表数据
const getTableData = () => {
	state.tableData.config.loading = true
	useAttendDailyCountEmployeeApi(state.tableData.param).then(({ content }) => {
		state.tableData.config.loading = false
		state.tableData.data = content.list.map((item: any) => {
			return {
				...item,
				days: state.days.reduce((obj: any, day: any) => {
					obj[day] = {
						signIn: item.days[day]?.signIn,
						signOut: item.days[day]?.signOut,
						status: item.days[day]?.status,
					}
					return obj
				}, {} as any)
			}
		})
		state.tableData.param.pageSize = content.pageSize
		state.tableData.param.pageNum = content.pageNum
		state.tableData.config.total = content.total
	})
};

// 导出明细
const onDownload = (data: any) => {
	let day = getDays(data.date, data.tdate)
	if (day > 31) {
		ElMessage.warning('仅最大支持导出31天的记录')
		return false
	} else {
		state.tableData.param.date = data.date
		state.tableData.param.day = day
		ElMessageBox.confirm(`此操作将导出人员汇总表，是否继续?`, '提示', {
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
		}).then(() => {
			// axios.post(`${state.tableData.config.baseUrl}/v0/attend/daily/exportCountEmployee`,{})
			downloadFile('POST', `${state.tableData.config.baseUrl}/v0/attend/daily/exportCountEmployee`, { date: state.tableData.param.date, day: state.tableData.param.day }, '安防综合管理平台-人员汇总表')
		});
	}
};

// 搜索点击时表单回调
const onSearch = (data: any) => {
	state.days = setDays(data.date)
	state.tableData.param.day = data.day
	state.tableData.param = Object.assign({}, state.tableData.param, { ...data });
	getTableData()
};


// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.pageSize = val;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.pageNum = val;
	getTableData();
};

// 页面加载时
onMounted(() => {
	state.days = setDays(state.tableData.param.date)
	getTableData();
});
</script>

<style scoped lang="scss">
.table-demo-container {
	.table-demo-padding {
		padding: 15px;

		.table-demo {
			flex: 1;
			overflow: hidden;
		}
	}
}

.menu-left {
	height: 650px;
	margin-right: 15px;
	overflow-y: auto;
	padding: 0 5px 30px 0;
	min-width: 300px;
}
</style>
